<!--开卡员端开卡-->
<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/index' }">领卡员端</el-breadcrumb-item>
    <el-breadcrumb-item>领用出库</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="card">
    <el-form class="card_container" :rules="rules" :model="addForm" ref="addRef">
      <el-form-item prop="startCard">
        <span>请输入起始卡号: &nbsp;</span>
        <el-input v-model="addForm.startCard"></el-input>
      </el-form-item>
      <el-form-item prop="endCard">
        <span>请输入末尾卡号: &nbsp;</span>
        <el-input v-model="addForm.endCard"></el-input>
      </el-form-item>
    </el-form>
    <div class="card_button">
      <el-button @click="reConfirm">确&nbsp;&nbsp;&nbsp;&nbsp;认</el-button>
    </div>
  </div>
<!--  <div>-->
<!--    <el-button @click="go">go</el-button>-->
<!--  </div>-->
</template>

<script setup>
import {getCurrentInstance, reactive, ref} from "vue";
  const { proxy } = getCurrentInstance()
  const addForm = reactive({
    startCard: '',
    endCard: ''
  })
  const tokenStr = window.sessionStorage.getItem('satoken')
  const total = ref(0)
  const rules = reactive({
    startCard: [
      {
        required: true,
        message: '请输入初始卡号',
        trigger: 'blur'
      },
      {
        min: 8,
        message: '初始卡号长度至少要8个字符',
        trigger: 'blur'
      }
    ],
    endCard: [
      {
        required: true,
        message: '请输入末尾卡号',
        trigger: 'blur'
      },
      {
        min: 8,
        message: '末尾卡号长度至少要8个字符',
        trigger: 'blur'
      }
    ]
  })
  const addRef = ref('')

  // 计算卡数量
  const countCards = () => {
    total.value =  parseInt(addForm.endCard) - parseInt(addForm.startCard) +1
  }
  const go = async () => {
    const {data: res} = await proxy.$http.LogService.test({'satoken': tokenStr})
  }

  // 重置表单
  const rstForm = () => {
    addRef.value.resetFields()
  }
  // 开卡提示弹窗
  const reConfirm = () => {
    countCards()
    proxy.$messageBox.confirm(
        '你是否选择对卡 '+ addForm.startCard + ' 至卡 '+ addForm.endCard +' 的 ' + total.value + ' 张卡进行开通操作',
        '提示',
        {
          confirmButtonText: '确认开卡',
          cancelButtonText: '取消开卡',
          type: 'warning',
        }
    )
        .then(async () => {
          // 开卡操作请求
          const {data: res} = await proxy.$http.CardService.activeCard({originate: addForm.startCard, deadline: addForm.endCard})
          if (res.code !== 200) {
            rstForm()
            return proxy.$message({
              type: 'error',
              message: res.msg,
            })
          }
          rstForm()
          proxy.$message({
            type: 'success',
            message: '开卡成功',
          })
        })
        .catch(() => {
          proxy.$message({
            type: 'info',
            message: '取消开卡',
          })
        })
  }
</script>

<style scoped lang="scss">
  .card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90%;
  }
  .el-breadcrumb{
    height: 10%;
  }
  .card_container {
    width: 70%;
    box-sizing: border-box;
    min-width: 500px;
    background-color: rgb(75,66,49);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-radius: 0.1rem;
    .el-form-item {
      margin-top: 0.2rem;
      span{
        font-size: 0.3rem;
        color: white;
      }
      .el-input {
        width: 60%;
        height: 0.5rem;
      }
    }
  }
  .card_button {
    width: 30%;
    height: 60px;
    margin-top: 1rem;
    display: flex;
    .el-button {
      width: 100%;
      height: 100%;
      background-color: rgb(75,66,49);
      color: white;
      font-weight: bolder;
      font-size: 0.3rem;
    }
  }
  :deep(.card_container .el-input__wrapper) {
    background-color: rgb(193,149,84);
    font-size: 0.3rem;
  }

  :deep(.card_container .el-input__inner) {
    color: white
  }
</style>
